<!DOCTYPE>
<title>recursion.html</title>
<script type="text/javascript" defer="defer">
	/* This function is recursive and it is less efficient than function getPageOffsetLeft_Iterative. */
	function getPageOffsetLeft(el) {
		var x;
		// Return the x coordinate of an element relative to the page.
		x = el.offsetLeft;
		if (el.offsetParent != null)
			x += getPageOffsetLeft(el.offsetParent);
		return x;
	}
	function getPageOffsetLeft_Iterative(el) {
		var total = el.offsetLeft;
		for ( var parent = el.parentNode; (parent = parent.offsetParent) != null; total += parent.offsetLeft)
			;
		/*
			this is same way as used in general.js in ARC product
			while (obj.offsetParent) {
				obj_curTopPos += obj.offsetTop;
				obj_curLeftPos += obj.offsetLeft;
				obj = obj.offsetParent;
			}

		 */
		return total;
	}
	function testRecursion(el) {
		var t0 = new Date().getTime();
		var n = 0;
		for ( var i = 0; i < 100; i++)
			n += getPageOffsetLeft(el);
		return "distance: " + (n / 100) + "\ntime: "
				+ (new Date().getTime() - t0);
	}

	function testIteration(el) {
		var t0 = new Date().getTime();
		var n = 0;
		for ( var i = 0; i < 100; i++)
			n += getPageOffsetLeft_Iterative(el);
		return "distance: " + (n / 100) + "\ntime: "
				+ (new Date().getTime() - t0);
	}
	//
</script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#container {
	bottom: 0;
	right: 0;
}

div {
	border: 1px solid grey;
	opacity: 96%;
	background: teal;
	-moz-opacity: 96%;
	filter: alpha(96);
	height: 200px;
	width: 200px;
}

h1 {
	font-family: sans-serif;
	margin: .2ex;
}

html,body {
	height: 500px;
}
/* ]]> */
</style>
<body>
<p>The deeply nested links inside the div are our test subjects. The
two functions, <code>getPageOffsetLeft</code>, and <code>getPageOffsetLeft_Iterative</code>
calculate the distance of each header from the left side of the page.</p>
<p><code>getPageOffsetLeft</code> calls itself recursively, passing
the el param's offsetParent to itsself.</p>
<p><code>getPageOffsetLeft_Iterative</code> achieves the same result
in an empty for loop.</p>
<p><strong>In the alert box, <samp>distance</samp> should
be always the same. Look for a difference in the value for <samp>time</samp>
in ms (lower number is faster). </strong></p>

<div id="container">
	<div style="position: absolute; bottom: 0; width: 302px; left: 2em">
		<div
			style="position: absolute; bottom: 0; width: 300px; top: -111px; left: 13ex">
			<div style="position: absolute; right: -29%">
				<div style="position: relative; top: -20%; left: -11%; padding: 7%">
					<div style="position: absolute; left: 17px; background: orange;">
						<div
							style="position: relative; margin-left: auto; margin-right: 100%; padding: 1.79em;">
							<div style="width: 220px; position: absolute; right: -30%;">
								<div style="margin: 0 -10%;">
								
									<div style="top: -10%; left: 30%; border: 1px solid red;">
										<h1><a href="/" onclick="alert(testIteration(this)); return false;"
											style='color: #00f'>Test Iteration</a></h1>
										<h1><a href="/" onclick="alert(testRecursion(this)); return false;"
											style='color: #00f'>Test Recursion</a></h1>									
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
